/**
 * WMS样式系统入口文件
 *
 * 统一导入和管理所有样式文件
 * 建立完整的样式加载顺序和依赖关系
 */

// 1. 首先导入CSS变量和主题基础
import "./variables.scss";

// 2. 导入重置样式和基础样式
import "./reset.scss";

// 3. 导入通用组件样式
import "./common.scss";

// 4. 导入第三方库样式定制
import "./element-plus.scss";

// 5. 导入响应式样式
import "./responsive.scss";

// 6. 导入动画和过渡效果
import "./animations.scss";

// 7. 导入打印样式
import "./print.scss";

// 导出主题管理器
export {
  wmsThemeManager,
  setupTheme,
  WMS_THEMES,
  WMS_DENSITY_MODES,
} from "./theme";

/**
 * 样式系统版本信息
 */
export const WMS_STYLES_VERSION = "1.0.0";

/**
 * 样式系统初始化函数
 */
export function initializeStyles() {
  // 添加样式系统标识
  document.documentElement.setAttribute("data-wms-styles", WMS_STYLES_VERSION);

  // 检查浏览器兼容性
  checkBrowserCompatibility();

  // 设置默认字体
  setDefaultFont();

  // 初始化滚动条样式
  initializeScrollbar();

  console.log(`WMS样式系统 v${WMS_STYLES_VERSION} 初始化完成`);
}

/**
 * 检查浏览器兼容性
 */
function checkBrowserCompatibility() {
  // 检查CSS自定义属性支持
  if (
    !window.CSS ||
    !window.CSS.supports ||
    !window.CSS.supports("--test", "0")
  ) {
    console.warn("当前浏览器不支持CSS自定义属性，部分样式可能无法正常显示");
  }

  // 检查CSS Grid支持
  if (
    !window.CSS ||
    !window.CSS.supports ||
    !window.CSS.supports("display", "grid")
  ) {
    console.warn("当前浏览器不支持CSS Grid，布局可能存在问题");
  }

  // 检查CSS Flexbox支持
  if (
    !window.CSS ||
    !window.CSS.supports ||
    !window.CSS.supports("display", "flex")
  ) {
    console.warn("当前浏览器不支持CSS Flexbox，布局可能存在问题");
  }
}

/**
 * 设置默认字体
 */
function setDefaultFont() {
  const fontFamily = getComputedStyle(
    document.documentElement,
  ).getPropertyValue("--wms-font-family");
  if (fontFamily) {
    document.body.style.fontFamily = fontFamily;
  }
}

/**
 * 初始化滚动条样式
 */
function initializeScrollbar() {
  // 为现代浏览器添加自定义滚动条样式
  const style = document.createElement("style");
  style.textContent = `
    /* WebKit浏览器滚动条样式 */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: var(--wms-bg-lighter);
      border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb {
      background: var(--wms-border-color-dark);
      border-radius: 4px;
      transition: background 0.3s ease;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: var(--wms-border-color-darker);
    }
    
    /* Firefox滚动条样式 */
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--wms-border-color-dark) var(--wms-bg-lighter);
    }
  `;
  document.head.appendChild(style);
}

/**
 * 动态加载样式文件
 */
export function loadStylesheet(href: string): Promise<void> {
  return new Promise((resolve, reject) => {
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = href;

    link.onload = () => resolve();
    link.onerror = () => reject(new Error(`样式文件加载失败: ${href}`));

    document.head.appendChild(link);
  });
}

/**
 * 移除样式文件
 */
export function removeStylesheet(href: string): void {
  const links = document.querySelectorAll(`link[href="${href}"]`);
  links.forEach((link) => link.remove());
}

/**
 * 获取当前加载的样式文件列表
 */
export function getLoadedStylesheets(): string[] {
  const links = document.querySelectorAll('link[rel="stylesheet"]');
  return Array.from(links).map((link) => (link as HTMLLinkElement).href);
}

/**
 * 样式系统工具函数
 */
export const StyleUtils = {
  /**
   * 获取CSS变量值
   */
  getCSSVariable(
    name: string,
    element: Element = document.documentElement,
  ): string {
    return getComputedStyle(element).getPropertyValue(name).trim();
  },

  /**
   * 设置CSS变量值
   */
  setCSSVariable(
    name: string,
    value: string,
    element: Element = document.documentElement,
  ): void {
    (element as HTMLElement).style.setProperty(name, value);
  },

  /**
   * 移除CSS变量
   */
  removeCSSVariable(
    name: string,
    element: Element = document.documentElement,
  ): void {
    (element as HTMLElement).style.removeProperty(name);
  },

  /**
   * 获取元素的计算样式
   */
  getComputedStyle(element: Element, property?: string): any {
    const computed = getComputedStyle(element);
    return property ? computed.getPropertyValue(property) : computed;
  },

  /**
   * 检查元素是否匹配媒体查询
   */
  matchesMedia(query: string): boolean {
    return window.matchMedia(query).matches;
  },

  /**
   * 获取当前屏幕尺寸分类
   */
  getScreenSize(): "xs" | "sm" | "md" | "lg" | "xl" | "xxl" {
    const width = window.innerWidth;

    if (width < 480) return "xs";
    if (width < 576) return "sm";
    if (width < 768) return "md";
    if (width < 992) return "lg";
    if (width < 1200) return "xl";
    return "xxl";
  },

  /**
   * 添加样式类
   */
  addClass(element: Element, className: string): void {
    element.classList.add(className);
  },

  /**
   * 移除样式类
   */
  removeClass(element: Element, className: string): void {
    element.classList.remove(className);
  },

  /**
   * 切换样式类
   */
  toggleClass(element: Element, className: string): void {
    element.classList.toggle(className);
  },

  /**
   * 检查是否包含样式类
   */
  hasClass(element: Element, className: string): boolean {
    return element.classList.contains(className);
  },
};

/**
 * 样式调试工具
 */
export const StyleDebugger = {
  /**
   * 显示CSS变量
   */
  showCSSVariables(element: Element = document.documentElement): void {
    const styles = getComputedStyle(element);
    const variables: Record<string, string> = {};

    // 获取所有以--wms开头的CSS变量
    for (let i = 0; i < styles.length; i++) {
      const property = styles[i];
      if (property.startsWith("--wms")) {
        variables[property] = styles.getPropertyValue(property);
      }
    }

    console.table(variables);
  },

  /**
   * 显示元素的所有样式
   */
  showElementStyles(element: Element): void {
    const styles = getComputedStyle(element);
    const allStyles: Record<string, string> = {};

    for (let i = 0; i < styles.length; i++) {
      const property = styles[i];
      allStyles[property] = styles.getPropertyValue(property);
    }

    console.table(allStyles);
  },

  /**
   * 高亮显示元素
   */
  highlightElement(element: Element, color: string = "#ff0000"): void {
    const originalOutline = (element as HTMLElement).style.outline;
    (element as HTMLElement).style.outline = `2px solid ${color}`;

    setTimeout(() => {
      (element as HTMLElement).style.outline = originalOutline;
    }, 2000);
  },

  /**
   * 显示布局信息
   */
  showLayoutInfo(element: Element): void {
    const rect = element.getBoundingClientRect();
    const styles = getComputedStyle(element);

    const info = {
      位置: {
        x: rect.x,
        y: rect.y,
        top: rect.top,
        left: rect.left,
        bottom: rect.bottom,
        right: rect.right,
      },
      尺寸: {
        width: rect.width,
        height: rect.height,
      },
      盒模型: {
        margin: {
          top: styles.marginTop,
          right: styles.marginRight,
          bottom: styles.marginBottom,
          left: styles.marginLeft,
        },
        padding: {
          top: styles.paddingTop,
          right: styles.paddingRight,
          bottom: styles.paddingBottom,
          left: styles.paddingLeft,
        },
        border: {
          top: styles.borderTopWidth,
          right: styles.borderRightWidth,
          bottom: styles.borderBottomWidth,
          left: styles.borderLeftWidth,
        },
      },
      定位: {
        position: styles.position,
        zIndex: styles.zIndex,
        display: styles.display,
      },
    };

    console.group("布局信息");
    console.table(info.位置);
    console.table(info.尺寸);
    console.group("盒模型");
    console.table(info.盒模型.margin);
    console.table(info.盒模型.padding);
    console.table(info.盒模型.border);
    console.groupEnd();
    console.table(info.定位);
    console.groupEnd();
  },
};
